<template>
  <view class="result-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input" @tap="goSearch">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <text class="keyword">{{ keyword }}</text>
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>

    <!-- 帖子列表 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="post-list" v-if="posts.length > 0">
        <view 
          class="post-item"
          v-for="post in posts"
          :key="post.id"
          @tap="goDetail(post)"
        >
          <!-- 用户信息 -->
          <view class="user-info">
            <image class="avatar" :src="post.userAvatar || '/static/images/default-avatar.jpg'" mode="aspectFill"></image>
            <text class="nickname">{{ post.userNickname }}</text>
          </view>
          
          <!-- 帖子内容 -->
          <view class="post-content">
            <text class="title">{{ post.title }}</text>
            <text class="content">{{ post.content }}</text>
            <!-- 图片展示 -->
            <view class="image-list" v-if="post.images && post.images.length > 0">
              <image 
                v-for="(image, index) in post.images.slice(0, 3)" 
                :key="index"
                :src="image"
                mode="aspectFill"
              ></image>
            </view>
          </view>
          
          <!-- 互动数据 -->
          <view class="interaction-info">
            <view class="interaction-item">
              <uni-icons type="eye" size="16" color="#999"></uni-icons>
              <text>{{ post.viewCount }}</text>
            </view>
            <view class="interaction-item">
              <uni-icons type="heart" size="16" :color="post.isLiked ? '#ff5500' : '#999'"></uni-icons>
              <text>{{ post.likeCount }}</text>
            </view>
            <view class="interaction-item">
              <uni-icons type="chatbubble" size="16" color="#999"></uni-icons>
              <text>{{ post.commentCount }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <image src="/static/images/empty-search.png" mode="aspectFit"></image>
        <text>暂无相关帖子</text>
      </view>

      <!-- 加载更多 -->
      <uni-load-more :status="loadMoreStatus" v-if="posts.length > 0"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      posts: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more',
      isRefreshing: false
    }
  },

  onLoad(options) {
    this.keyword = decodeURIComponent(options.keyword || '')
    this.loadPosts()
  },

  methods: {
    // 加载帖子列表
    async loadPosts() {
      try {
        if (this.page === 1) {
          this.posts = []
        }
        
        this.loadMoreStatus = 'loading'
        
        const params = {
          keyword: this.keyword,
          pageNum: this.page,
          pageSize: this.pageSize
        }
        
        // 使用社区搜索 API
        const res = await this.$api.community.search.searchPosts(params)
        
        if (res.code === 200 && res.data) {
          // 处理数据
          const formattedPosts = (res.data.records || []).map(post => ({
            ...post,
            createTime: Array.isArray(post.createTime) 
              ? `${post.createTime[0]}-${String(post.createTime[1]).padStart(2, '0')}-${String(post.createTime[2]).padStart(2, '0')} ${String(post.createTime[3]).padStart(2, '0')}:${String(post.createTime[4]).padStart(2, '0')}`
              : post.createTime,
            images: Array.isArray(post.images) ? post.images : (post.images ? post.images.split(',') : [])
          }))
          
          this.posts = [...this.posts, ...formattedPosts]
          this.loadMoreStatus = this.posts.length >= res.data.total ? 'noMore' : 'more'
        } else {
          throw new Error(res.message || '加载失败')
        }
      } catch (error) {
        console.error('加载帖子列表失败:', error)
        this.loadMoreStatus = 'more'
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      }
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      await this.loadPosts()
      this.isRefreshing = false
    },

    // 加载更多
    loadMore() {
      if (this.loadMoreStatus === 'more') {
        this.page++
        this.loadPosts()
      }
    },

    // 跳转到搜索页
    goSearch() {
      uni.redirectTo({
        url: '/pages/community/search/index'
      })
    },

    // 跳转到详情页
    goDetail(post) {
      uni.navigateTo({
        url: `/pages/community/detail/index?id=${post.id}`
      })
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.result-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .search-input {
    flex: 1;
    height: 72rpx;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 30rpx;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    
    .keyword {
      font-size: 28rpx;
      color: #333;
      margin-left: 20rpx;
    }
  }
  
  .cancel-btn {
    font-size: 28rpx;
    color: #666;
  }
}

.content-scroll {
  height: calc(100vh - 112rpx);
}

.post-list {
  padding: 20rpx;
  
  .post-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
      
      .nickname {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .post-content {
      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      
      .image-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10rpx;
        margin-top: 16rpx;
        
        image {
          width: 100%;
          height: 200rpx;
          border-radius: 8rpx;
        }
      }
    }
    
    .interaction-info {
      display: flex;
      gap: 40rpx;
      margin-top: 16rpx;
      
      .interaction-item {
        display: flex;
        align-items: center;
        
        text {
          font-size: 24rpx;
          color: #999;
          margin-left: 4rpx;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 